<template>
	<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
		<van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
			<view class="van-cell" v-for="item in list" :key="item">
				<view class="title">
					<text>{{ item.title }}</text>
					<text class="salary">{{ item.salary }}</text>
				</view>
				<view class="company">
					<text>{{ item.company }} {{ item.IPO }} {{ item.count }}</text>
				</view>
				<view class="info">
					<van-tag v-for="tag in item.info" color="#f7f8fa" text-color="#0d1c28">{{ tag }}</van-tag>
				</view>
				<view class="name">
					<image :src="item.avatar" mode=""></image>
					<text>{{ item.name }}</text>
				</view>
			</view>
		</van-list>
	</van-pull-refresh>
</template>

<script setup>
import { ref, onMounted } from 'vue';
const list = ref([
	{
		title: '初级JAVA开发工程师（征信公司）',
		salary: '1-1.6万·15薪',
		id: 1,
		company: '江西联合股权交易中心',
		IPO: '天使轮',
		count: '100-299人',
		info: ['1-3年', '本科', '计算机软件'],
		name: '曾xx·人事经理',
		avatar: new URL('@/static/images/avatar.jpg', import.meta.url).href
	},
	{
		title: '初级JAVA开发工程师（征信公司）',
		salary: '1-1.6万·15薪',
		id: 1,
		company: '江西联合股权交易中心',
		IPO: '天使轮',
		count: '100-299人',
		info: ['1-3年', '本科', '计算机软件'],
		name: '曾xx·人事经理',
		avatar: new URL('@/static/images/avatar.jpg', import.meta.url).href
	},
	{
		title: '初级JAVA开发工程师（征信公司）',
		salary: '1-1.6万·15薪',
		id: 1,
		company: '江西联合股权交易中心',
		IPO: '天使轮',
		count: '100-299人',
		info: ['1-3年', '本科', '计算机软件'],
		name: '曾xx·人事经理',
		avatar: new URL('@/static/images/avatar.jpg', import.meta.url).href
	},
	{
		title: '初级JAVA开发工程师（征信公司）',
		salary: '1-1.6万·15薪',
		id: 1,
		company: '江西联合股权交易中心',
		IPO: '天使轮',
		count: '100-299人',
		info: ['1-3年', '本科', '计算机软件'],
		name: '曾xx·人事经理',
		avatar: new URL('@/static/images/avatar.jpg', import.meta.url).href
	},
	{
		title: '初级JAVA开发工程师（征信公司）',
		salary: '1-1.6万·15薪',
		id: 1,
		company: '江西联合股权交易中心',
		IPO: '天使轮',
		count: '100-299人',
		info: ['1-3年', '本科', '计算机软件'],
		name: '曾xx·人事经理',
		avatar: new URL('@/static/images/avatar.jpg', import.meta.url).href
	},
	{
		title: '初级JAVA开发工程师（征信公司）',
		salary: '1-1.6万·15薪',
		id: 1,
		company: '江西联合股权交易中心',
		IPO: '天使轮',
		count: '100-299人',
		info: ['1-3年', '本科', '计算机软件'],
		name: '曾xx·人事经理',
		avatar: new URL('@/static/images/avatar.jpg', import.meta.url).href
	},
	{
		title: '初级JAVA开发工程师（征信公司）',
		salary: '1-1.6万·15薪',
		id: 1,
		company: '江西联合股权交易中心',
		IPO: '天使轮',
		count: '100-299人',
		info: ['1-3年', '本科', '计算机软件'],
		name: '曾xx·人事经理',
		avatar: new URL('@/static/images/avatar.jpg', import.meta.url).href
	},
	{
		title: '初级JAVA开发工程师（征信公司）',
		salary: '1-1.6万·15薪',
		id: 1,
		company: '江西联合股权交易中心',
		IPO: '天使轮',
		count: '100-299人',
		info: ['1-3年', '本科', '计算机软件'],
		name: '曾xx·人事经理',
		avatar: new URL('@/static/images/avatar.jpg', import.meta.url).href
	},
	{
		title: '初级JAVA开发工程师（征信公司）',
		salary: '1-1.6万·15薪',
		id: 1,
		company: '江西联合股权交易中心',
		IPO: '天使轮',
		count: '100-299人',
		info: ['1-3年', '本科', '计算机软件'],
		name: '曾xx·人事经理',
		avatar: new URL('@/static/images/avatar.jpg', import.meta.url).href
	},
	{
		title: '初级JAVA开发工程师（征信公司）',
		salary: '1-1.6万·15薪',
		id: 1,
		company: '江西联合股权交易中心',
		IPO: '天使轮',
		count: '100-299人',
		info: ['1-3年', '本科', '计算机软件'],
		name: '曾xx·人事经理',
		avatar: new URL('@/static/images/avatar.jpg', import.meta.url).href
	},
	{
		title: '初级JAVA开发工程师（征信公司）',
		salary: '1-1.6万·15薪',
		id: 1,
		company: '江西联合股权交易中心',
		IPO: '天使轮',
		count: '100-299人',
		info: ['1-3年', '本科', '计算机软件'],
		name: '曾xx·人事经理',
		avatar: new URL('@/static/images/avatar.jpg', import.meta.url).href
	},
	{
		title: '初级JAVA开发工程师（征信公司）',
		salary: '1-1.6万·15薪',
		id: 1,
		company: '江西联合股权交易中心',
		IPO: '天使轮',
		count: '100-299人',
		info: ['1-3年', '本科', '计算机软件'],
		name: '曾xx·人事经理',
		avatar: new URL('@/static/images/avatar.jpg', import.meta.url).href
	}
]);
const defaultList = ref([]);
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);
const onLoad = () => {
	setTimeout(() => {
		if (refreshing.value) {
			list.value = [];
			refreshing.value = false;
		}

		for (let i = 0; i < 10; i++) {
			list.value.push({
				...defaultList.value[i],
				id: list.value.length + 1
			});
		}
		loading.value = false;

		if (list.value.length >= 40) {
			finished.value = true;
		}
	}, 1000);
};
const onRefresh = () => {
	// 清空列表数据
	finished.value = false;
	defaultList.value = [...list.value];
	// 重新加载数据
	// 将 loading 设置为 true，表示处于加载状态
	loading.value = true;
	onLoad();
};
onMounted(() => {
	defaultList.value = [...list.value];
});
</script>

<style lang="scss" scoped>
.van-pull-refresh {
	margin-top: 10px;
}
.van-list {
	background-color: #f7f8fa;
	padding: 0 10px;
}
.van-cell {
	margin-bottom: 10px;
	border-radius: 4px;
	display: flex;
	flex-direction: column;
	gap: 5px;
	.title {
		width: 100%;
		display: flex;
		justify-content: space-between;
		color: $base-color;
		font-size: $base-size;
		text:nth-child(1) {
			width: 60%;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		.salary {
			font-weight: 600;
			color: #fedd32;
		}
	}
	.company {
		font-size: $min-size;
		color: $grey-color;
	}
	.info {
		.van-tag {
			margin-right: 5px;
			border-radius: 2px;
			font-size: $min-size;
		}
	}
	.name {
		display: flex;
		align-items: center;
		width: 60%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		image {
			width: 20px;
			height: 20px;
			border-radius: 50%;
		}
		text {
			font-size: $min-size;
			color: $grey-color;
			margin-left: 5px;
		}
	}
}
</style>
